/**
 * Created by zzy on 2017/9/11.
 */
import React, {Component} from 'react';
import {
    Text,
    View,
    TouchableOpacity,
    Image,
    StyleSheet,
    Dimensions,
    PixelRatio,
} from 'react-native';
import Modal from 'react-native-modalbox';
import {observer} from 'mobx-react/native'
import {observable, action, computed, observe} from 'mobx'
import {RadioGroup, RadioButton} from 'react-native-flexi-radio-button'

@observer
export default class PayTypeModal extends Component{
    @observable payTypeIndex=0;
    @observable payTypeTitle='';
    constructor(props){
        super(props);
        this.onTitleSelect = this.onTitleSelect.bind(this);
        this.callbcak=this.props.callbcak;
    }
    render(){
        return <Modal
            position="bottom"
            ref={"payTypeModal"}
            backButtonClose={true}
            style={{
                backgroundColor:'white',
                height:100
            }}
        >
            <View style={[{flexDirection:'row',justifyContent:'space-between',padding:10}]}>
                <Text onPress={this.closeModal.bind(this)}>取消</Text>
                <Text>支付方式</Text>
                <Text onPress={this.ensure.bind(this)}>确定</Text>
            </View>
            <RadioGroup
                style={{flexDirection:'row'}}
                selectedIndex={this.payTypeIndex}
                onSelect = {(index, value) => this.onTitleSelect(index, value)}
            >
                <RadioButton value={'在线支付'} >
                    <Text>在线支付</Text>
                </RadioButton>

                <RadioButton value={'货到付款'}>
                    <Text>货到付款</Text>
                </RadioButton>

            </RadioGroup>
        </Modal>
    }
    onTitleSelect(index, value){
        this.payTypeIndex=index;
        this.payTypeTitle=value;
    }
    openModal(){
        this.refs.payTypeModal.open();
    }
    closeModal(){
        this.refs.payTypeModal.close();
    }
    ensure(){
        this.closeModal();
        this.props.callbcak(this.payTypeTitle);
    }
}